<template>
    <div class="authcode">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle>
            <template #title>输入验证码</template>
            <template #text>为安全起见，请验证您的手机</template>
        </loginTitle>
        <div class="userinfo" v-if="mailbox.img">
            <img :src="mailbox.img" alt="">
            <div>
                <p style="font-size: 1.3rem; margin-bottom: 0.8rem;">{{ mailbox.username }}</p>
                <span class="userinfo-info">{{ mailbox.email }}</span>
            </div>
        </div>
        <div class="Mypassword">
            <van-password-input :value="values" :error-info="errorInfo" :gutter="40" length="4" :focused="showKeyboard"
                @focus="show = true" />
        </div>
        <loginText>
            <template #myregister><span :style="{ color }" @click="getCode">立即获取</span>
            </template>
            <template #mylogin>获取验证码，</template>
        </loginText>
        <van-count-down :time="time" format="ss 秒" v-show="codeItem" @finish="onFinish" @change="onChange" />
        <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="onDelete" />
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import router from '@/router';
import loginTitle from '@/components/loginTitle.vue';
import loginText from "@/components/loginText.vue";
import { useUserLogin } from '../../../store/useLogin/index';
import { storeToRefs } from 'pinia';
import { onUnmounted } from "vue";
const errorInfo = ref('');//错误提示
const showKeyboard = ref(true);
const show = ref(false);//键盘开关
let useLogin = useUserLogin();
let { code, color, codeItem, time, values, mailbox, myphone } = storeToRefs(useLogin) as any;
// 键盘点击事件
const onInput = (val: string) => {
    if (values.value.length <= 3) {
        values.value = values.value + val
    }
    if (values.value === code.value && myphone.value) {
        router.push('/Hello')
    }
    if (values.value === code.value && mailbox.value.email) {
        router.push('/setpass')
        useLogin.setflag(false)
    }
};
// 键盘删除
const onDelete = () => {
    values.value = values.value.slice(0, values.value.length - 1);
};
// 请求验证码
const getCode = async () => {
    color.value = '#d2cde5';
    codeItem.value = true;
    // 手机验证
    if (myphone.value && time.value === 0) {
        await useLogin.setTime(6000)
        console.log('手机');
        await useLogin.getStorephoneregCode({ phone: myphone.value })
    } else if (mailbox.value.email && time.value === 0) {
        await useLogin.setTime(6000)
        console.log('邮箱');
        await useLogin.getStoreemailregCode()
    }
};
// 监听验证码
watch(values, (newVal: string | any[]) => {
    if (newVal.length === 4 && newVal !== code.value) {
        errorInfo.value = '验证码错误';
    } else {
        errorInfo.value = '';
    }
});
// 验证码结束
let onFinish = async () => {
    codeItem.value = false;
    await useLogin.setTime(0)
    color.value = 'red';
};
// 验证码change事件 
const onChange = async (e: any) => {
    useLogin.setTime(e.total)
};
// 组件实例销毁后
onUnmounted(async () => {
    values.value = '';
    myphone.value = '';
    await useLogin.setTime(0)
});
</script>
<style lang="scss" scoped>
.authcode {
    height: 100%;
    width: 100%;

    .userinfo {
        display: flex;
        align-items: end;
        height: 8rem;

        img {
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 50%;
            margin: 0 1.5rem 0 3rem;
        }

        .userinfo-info {
            font-size: 1.2rem;
            color: #b6afd5;

        }
    }

    .active {
        color: #808080;
    }

    .act {
        color: red;
    }

    .Mypassword {
        margin-left: 1rem;
        width: 95%;
        margin-top: 5rem;
        margin-bottom: 3rem;
    }
}

::v-deep .van-nav-bar .van-icon {
    color: #000;

}

::v-deep .van-password-input__item {
    border: 0.1rem solid #d2cde5;
    border-radius: 1rem;
}

::v-deep .van-count-down {
    background-color: #808080;
    color: #fff;
    width: 10rem;
    height: 4rem;
    border-radius: 3rem;
    text-align: center;
    line-height: 4rem;
    margin-left: 13.5rem;
    margin-top: 3rem;
}
</style>